<template>
  <div class="pinggu">
    <div class="firstTitle">您的健康状态</div>
    <div class="topBox">
      <div class="top-item">
        <div class="item-title">
          物质状态
        </div>
        <div class="echart-box" id="wuzhiChar"></div>
        <div class="dis-text">
          {{ state.radarSystemMsg }}
        </div>
      </div>
      <div class="top-item" >
        <div class="item-title">
          能量状态
        </div>
        <div class="echart-box" id="nengliangChar"></div>
        <div class="dis-text">
          {{state.radarEnergyMsg}}
        </div>
      </div>
      <div class="top-item">
        <div class="item-title">
          信息状态
        </div>
        <div class="echart-box" id="xinxiChar"></div>
        <div class="dis-text">
          {{ state.radarinfoMsg }}
        </div>
      </div>
    </div>
    <div class="pinggu-content">
      <div class="view-box">
        <tempalte v-if="state.selfSymptom.length">
          <div class="title ml10">个人病史</div>
          <div class="pl10">
            <LzMenu :menuItems="state.selfSymptom" :defaultIndex="state.selfActIndex" @clickLzMenuItem="changeSymptom" class="roundSpan" :parenId="state.acIndex"></LzMenu>
          </div>
          <div class="openBox" v-show="state.symptomShow">
            <div class="open-item">
              <div class="open-title">疾病百科</div>
              <ul class="open-ul">
                <li class="open-li" v-if="state.selfSymptomAct.diseasesEncyclopediaClinicalIntro ">
                  <div class="li-name">医学解释</div>
                  <div class="li-content">{{state.selfSymptomAct.diseasesEncyclopediaClinicalIntro }}</div>
                </li>
                <li class="open-li" v-if="state.selfSymptomAct.mdiseasesEncyclopediaCommonReason">
                  <div class="li-name">常见原因</div>
                  <div class="li-content">{{state.selfSymptomAct.mdiseasesEncyclopediaCommonReason}}</div>
                </li>
                <li class="open-li" v-if="state.selfSymptomAct.diseasesEncyclopediaVulnerableOrgan">
                  <div class="li-name">易损器官</div>
                  <div class="li-content">{{state.selfSymptomAct.diseasesEncyclopediaVulnerableOrgan}}</div>
                </li>
              </ul>
            </div>
            <div class="open-item">
              <div class="open-title">就医指导</div>
              <ul class="open-ul">
                <li class="open-li" v-if="state.selfSymptomAct.diseasesEncyclopediaCommonSymptom">
                  <div class="li-name">常见症状</div>
                  <div class="li-content">{{state.selfSymptomAct.diseasesEncyclopediaCommonSymptom}}</div>
                </li>
                <li class="open-li" v-if="state.selfSymptomAct.diseasesEncyclopediaCommandDivision">
                  <div class="li-name">推荐科室</div>
                  <div class="li-content">{{ state.selfSymptomAct.diseasesEncyclopediaCommandDivision }}</div>
                </li>
                <li class="open-li" v-if="state.selfSymptomAct.diseasesEncyclopediaCommandTest">
                  <div class="li-name">推荐检查</div>
                  <div class="li-content">{{state.selfSymptomAct.diseasesEncyclopediaCommandTest}}</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="big-btn" v-if="state.selfActIndex!==''" @click="state.symptomShow=!state.symptomShow">
            <template v-if="state.symptomShow" >全部收起<van-icon name="arrow-up" /></template>
            <template v-else>全部展开<van-icon name="arrow-down" /></template>
          </div>
        </tempalte>
        <div class="title zbTitle" v-show="state.tagsList&& state.tagsList.length">重点指标</div>
        <div class="pl10" v-show="state.tagsList&& state.tagsList.length">
          <LzMenu :menuItems="state.tagsList" :defaultIndex="state.lkMenuDef1" @clickLzMenuItem="changeQuota" class="roundSpan" :parenId="state.acIndex"></LzMenu>
        </div>
        <div class="openBox pb0" v-show="state.zhibiaoShow">
          <div class="open-item">
            <div class="open-title">{{state.tagsListAct.name}} <van-icon name="question-o" @click="state.showUp=true" v-if="state.tagsListAct.nounsDesc ||state.tagsListAct.estimateDesc" /></div>
            <ul class="open-ul" v-if="state.tagsListAct.anomalyDesc || state.tagsListAct.trendDesc">
              <li class="open-li" v-if="state.tagsListAct.anomalyDesc">
                <div class="li-name">指标解读</div>
                <div class="li-content" v-html="state.tagsListAct.anomalyDesc"></div>
              </li>
              <li class="open-li" v-if="state.tagsListAct.trendDesc">
                <div class="li-name">趋势分析</div>
                <div class="li-content">{{state.tagsListAct.trendDesc}}</div>
              </li>
            </ul>
          </div>
          <div class="lineChart" id="lineChart"></div>
        </div>
        <div class="big-btn" v-show="state.tagsList&& state.tagsList.length" @click="state.hibiaoShow=!state.zhibiaoShow">
          <template v-if="state.zhibiaoShow">全部收起<van-icon name="arrow-up" /></template>
          <template v-else>全部展开<van-icon name="arrow-down" /></template>
        </div>
        <div class="title mbTitle" v-if="state.pingGuList[0].showQuestionnaire">慢病风险评估</div>
        <ul class="pingguList">
          <template v-for="(gu, gi) in state.pingGuList">
            <li class="pg-li" v-if="gi ===0 &&gu.showQuestionnaire" :key="gi" @click="goWenjuan(gu, 'new', 1)">
              <img :src="getAssetImg(gu.icon)" alt="" class="pg-li-icon">
              <template v-if="gu.pResult">
                <div class="pg-li-center">
                  <div :class="['pg-tip', 'pg-tip' + gu.color]">{{gu.pResult}}</div>
                  <div>{{gu.pName}}</div>
                </div>
                <div class="to-report">查看报告<van-icon name="arrow" /></div>
                <div class="redo" @click.stop="goWenjuan(gu, 'new', 0)">重新评估</div>
              </template>
              <template v-else>
                <div class="pg-li-center">
                  <div class="pg-tip">{{gu.pName}}</div>
                  <div v-html="gu.desc" class="preLine"></div>
                </div>
                <div class="to-pinggu">去评估<van-icon name="arrow" /></div>
              </template>
            </li>
          </template>
        </ul>
      </div>
      <div class="view-box border-purple">
        <div class="title tzTitle">体质类型</div>
        <ul class="pingguList">
          <template v-for="(gu, gi) in state.pingGuList">
            <li class="pg-li" v-if="gi === 5" :key="gi" @click="goWenjuan(gu, 'tizhi', 1)">
              <img :src="getAssetImg(gu.icon)" alt="" class="pg-li-icon">
              <template v-if="gu.pResult">
                <div class="pg-li-center">
                  <div :class="['pg-tip', 'pg-tip' + gu.color]">{{gu.pResult}}</div>
                  <div>{{gu.pName}}</div>
                </div>
                <div class="to-report">查看报告<van-icon name="arrow" /></div>
                <div class="redo" @click.stop="goWenjuan(gu, 'tizhi', 0)">重新评估</div>
              </template>
              <template v-else>
                <div class="pg-li-center">
                  <div class="pg-tip">{{gu.pName}}</div>
                  <div v-html="gu.desc" class="preLine"></div>
                </div>
                <div class="to-pinggu">去评估<van-icon name="arrow" /></div>
              </template>
            </li>
          </template>
        </ul>
      </div>
      <div class="view-box border-blue">
        <div class="title qzTitle">情志状态</div>
        <ul class="pingguList">
          <template v-for="(gu, gi) in state.pingGuList">
            <li class="pg-li" v-if="gi > 5" :key="gi" @click="goWenjuan(gu, 'code', 1)">
              <img :src="getAssetImg(gu.icon)" alt="" class="pg-li-icon">
              <template v-if="gu.pResult">
                <div class="pg-li-center">
                  <div :class="['pg-tip', 'pg-tip' + gu.color]">{{gu.pResult}}</div>
                  <div>{{gu.pName}}</div>
                </div>
                <div class="to-report">查看报告<van-icon name="arrow" /></div>
                <div class="redo" @click.stop="goWenjuan(gu, 'code', 0)">重新评估</div>
              </template>
              <template v-else>
                <div class="pg-li-center">
                  <div class="pg-tip">{{gu.pName}}</div>
                  <div v-html="gu.desc" class="preLine"></div>
                </div>
                <div class="to-pinggu">去评估<van-icon name="arrow" /></div>
              </template>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <div :class="['replayBox', state.errApiList.length ? 'hasFresh' : 'noFresh']" v-if="state.errApiList.length" @click.stop="reloadFailRequest">
      <van-icon name="replay" class="replay"/>
    </div>
    <van-popup v-model:show="state.showUp" class="myPup">
      <div class="pop-close" @click="state.showUp=false">关闭</div>
      <div class="pop-title">{{state.tagsListAct.quotaName}}</div>
      <div class="pop-content">
        <template v-if="state.tagsListAct.nounsDesc">
          <div class="pop-name">名词解释</div>
          <div class="pop-text">{{ state.tagsListAct.nounsDesc }}</div>
        </template>
        <template v-if="state.tagsListAct.estimateDesc">
          <div class="pop-name" >判断标准</div>
          <div class="pop-text">{{ state.tagsListAct.estimateDesc}}</div>
        </template>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance, reactive, nextTick, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { Toast } from 'vant';
import LzMenu from '@/components/LzMenu.vue';
import {http} from "@/axios/http";
import * as API from "@/axios/api";
import utils from '@/utils/utils.ts';
import {getRadarOption, getRadarData, doLineChartData, getLineOption} from './initChar.js';

const route = useRoute();
const instance = <any>getCurrentInstance();
const { $echarts } = instance.appContext.config.globalProperties;
let userId = ref('');
let appKey = ref('');
let state = reactive({
  radarEnergyMsg: '',
  radarSystemMsg: '',
  radarinfoMsg: '',
  showUp: false,
  tagsList:[],
  tagsListAct: {},
  zhibiaoShow: true,
  symptomShow: false,
  selfSymptom: [], // 个人病史
  selfSymptomAct: {}, // 当前病史
  selfActIndex: <any>'',
  pingGuList: [
    {
      pName:'高血压风险评估',color: '', lkCode:'lk1589863388662', qCode: 4, mCode: 'HYPERTENSION_RISK_QUESTIONNAIRE',
      desc: '关注高血压风险因素，\n保持血压健康态',
      icon: '../../../assets/images/icon/gaoxueya.png',
      pResult: '', showQuestionnaire: true,
      type: '慢病风险'
    },
    {
      pName:'糖尿病风险评估', color: '', lkCode:'lk1589863387856', qCode: 8, mCode: 'TYPE_2_DIABETES_RISK_QUESTIONNAIRE',
      desc: '预测糖尿病风险，\n你需要了解这些内容', icon: '../../../assets/images/icon/tangniao.png',
      pResult: '', showQuestionnaire: true,
      type: '慢病风险'
    },
    {
      pName:'缺血性心血管病风险评估', color: 'I25.9020', lkCode:'', qCode: 7, mCode: 'ISCHEMIC_CARDIOVASCULAR_DISEASE_QUESTIONNAIRE',
      desc: '预测远期心血管病风险，\n指导当下健康生活', icon: '../../../assets/images/icon/qx.png',
      pResult: '', showQuestionnaire: true,
      type: '慢病风险'
    },
    {
      pName:'脑卒中风险评估', color: '', lkCode:'lk1589863388245', qCode: 6, mCode: 'STROKE_RISK_QUESTIONNAIRE',
      desc: '了解脑卒中风险因素，\n远离脑卒中威胁', icon: '../../../assets/images/icon/ncz.png',
      pResult: '', showQuestionnaire: true,
      type: '慢病风险'
    },
    {
      pName:'痛风风险评估', color: '', lkCode:'lk1589534046151', qCode: 0, mCode: 'GOUT_RISK_QUESTIONNAIRE',
      desc: '预测痛风风险，\n塑造良好生活方式', icon: '../../../assets/images/icon/tf.png',
      pResult: '', showQuestionnaire: true,
      type: '慢病风险'
    },
    {
      pName:'体质评估', color: '', lkCode:'lk1590461580501', qCode: 40,
      desc: '辨辨体质，正确养生', icon: '../../../assets/images/icon/tz.png',
      pResult: '', showQuestionnaire: true,
      type: '体质类型'
    },
    {
      pName:'失眠评估', color: '', lkCode:'lk1589863389821', qCode: 2,
      desc: '好睡眠，好状态，\n测测你的睡眠得分', icon: '../../../assets/images/icon/sm.png',
      pResult: '', showQuestionnaire: true,
      type: '情志状态'
    },
    {
      pName:'压力水平测试', color: '', lkCode:'lk1589863386175', qCode: 13,
      desc: '你承受的压力有多大？\n测测压力等级', icon: '../../../assets/images/icon/yl.png',
      pResult: '', showQuestionnaire: true,
      type: '情志状态'
    },
  ],
  errApiList: [],
  trendObj: {},
  lkMenuDef1: 0
})
let charDom = reactive({
  wuzhi: '',
  nengliang: '',
  xinxi: '',
  line: ''
})

let getAssetImg = (src) => {
  return new URL(src, import.meta.url).href
}
let changeQuota = (item) => {
  if(item.key === state.tagsListAct.key) {
    // 做展示隐藏切换
    state.zhibiaoShow = !state.zhibiaoShow
  } else {
    state.zhibiaoShow = true
    state.tagsListAct = state.tagsList[item.key]
    if(state.tagsList[item.key]?.hasData) {
      // 用缓存数据渲染
      doLineEchart(...item.data)
    } else {
      // 请求数据
      getTrendList(item.quotaCode, item.key)
    }
  }
  state.lkMenuDef1+=1
}
let doLineEchart = (data, dataT) => {
  if(data || dataT) {
    let lineOption = getLineOption(data, dataT)
    charDom.line?.setOption(lineOption, true)
  } else {
    charDom.line?.clear()
  }
}
let getTrendList = (code, k=0) => {
  state.trendObj = {code,k}
  const params = {
    quotaCode:code,
    userId: userId.value
  }
  http({
    baseUrl: API.baseUrl,
    url: API.getTrendList,
    method: 'POST',
    params: JSON.stringify(params)
  },(res) =>{
    Toast.clear()
    if (res && res.data && res.data.code ==="10000"){
      let data = res.data.data
      let lineData = doLineChartData(data[0])
      let lineData2 =data[1] ? doLineChartData(data[1]) : false
      // 做数据记录start
      state.tagsListAct.trendDesc = data[0].trendDesc
      state.tagsList[k].trendDesc = data[0].trendDesc
      state.tagsList[k].hasData = true
      state.tagsList[k].data = Object.freeze([lineData, lineData2])
      // end
      doLineEchart(lineData, lineData2)
    } else {
      charDom.line?.clear()
      state.errApiList.push('getTrendList')
      utils.toastMsg(res, this, API.getTrendList)
    }
  })
}
let getHomepage= () => {
  Toast.loading({
    mask: false,
    message: '',
    duration: 0
  });
  http({
    baseUrl: API.baseUrl,
    url: API.homepage,
    method: 'GET',
    params: {
      userId: userId.value
    }
  },(res) =>{
    Toast.clear()
    if (res && res.data && res.data.code === 200){
      let data = res.data.data
      if (data){
        state.radarEnergyMsg = data.radarEnergyMsg || ''
        state.radarinfoMsg = data.radarinfoMsg || ''
        state.radarSystemMsg = data.radarSystemMsg || ''
        state.selfSymptom = data.selfSymptom || []
        if(state.selfSymptom && state.selfSymptom.length) {
          state.selfSymptom.map((val,index)=>{
            if(val.data) {
              val.data.code = val.code
              if (state.selfActIndex === '') {
                state.selfActIndex = index
                state.selfSymptomAct = val.data
              }
            } else {
              val.dis = true
            }
          })
        }
        doEchartsData(data)
      }
    } else {
      Toast.clear()
      state.errApiList.push('getHomepage')
      utils.toastMsg(res, this, API.homepage)
    }
  })
}
let getEmphasisQuotaList = () => {
  const params = {
    userId: userId.value
  }
  http({
    baseUrl: API.baseUrl,
    url: API.getEmphasisQuotaList,
    method: 'POST',
    params: JSON.stringify(params)
  },(res) =>{
    if (res && res.data && res.data.code ==="10000"){
      let resData = res.data.data
      if(resData && resData.quotas) {
        resData.quotas.map((val)=>{
          val.name = val.quotaName
        })
        state.tagsList = resData.quotas
        if (state.tagsList && state.tagsList.length) {
          state.zhibiaoShow = true
          state.tagsListAct = state.tagsList[0]
          state.tagsListAct.key = 0
          getTrendList(state.tagsListAct.quotaCode,  0)
        } else {
          Toast.clear()
        }
      }
    } else {
      Toast.clear()
      state.errApiList.push('getEmphasisQuotaList')
      utils.toastMsg(res, this, API.getEmphasisQuotaList)
    }
  })
}
let questionnaireLists = () => {
  const params = {
    codes: ["lk1589863388662", "lk1589863387856", "I25.9020", "lk1589863388245", "lk1589534046151", "lk1590461580501", "lk1589863389821", "lk1589863386175"],
    userId: userId.value
  }
  http({
    baseUrl: API.baseUrl,
    url: API.questionnaireLists,
    method: 'POST',
    params: JSON.stringify(params)
  },(res) =>{
    if (res && res.data && res.data.code ===200){
      let resData = res.data.data
      state.pingGuList.map((v) => {
        if (resData[v.lkCode]) {
          v.pResult = resData[v.lkCode].name
          Object.assign(v, resData[v.lkCode])
        }
      })
    } else {
      state.errApiList.push('questionnaireLists')
      utils.toastMsg(res, this, API.questionnaireLists)
    }
  })
}
let doEchartsData = (data) => {
  if (data.radarSystem && data.radarSystem.length){
    let WZdata = getRadarData(data.radarSystem)
    let wuzhiOption = getRadarOption(0, WZdata)
    charDom.wuzhi && charDom.wuzhi.setOption(wuzhiOption)
  }
  if (data.radarEnergy && data.radarEnergy.length){
    let Nldata = getRadarData(data.radarEnergy)
    let nengliangOption = getRadarOption(1,Nldata)
    charDom.nengliang && charDom.nengliang.setOption(nengliangOption)
  }
  if (data.radarEnergy && data.radarEnergy.length){
    let XLdata = getRadarData(data.radarInfo)
    let xinxiOption = getRadarOption(2, XLdata)
    charDom.xinxi && charDom.xinxi.setOption(xinxiOption)
  }
}
let changeSymptom = (item) => {
  if(state.selfSymptomAct.code === item.code) {
    state.symptomShow = !state.symptomShow
  } else {
    state.selfSymptomAct = state.selfSymptom[item.key].data
    state.symptomShow= true
  }
  state.selfActIndex+=1
}
let reloadFailRequest = () => {
  Toast.loading({
    mask: false,
    message: '',
    duration: 0
  })
  state.errApiList.map((v) => {
    if (v === 'getTrendList') {
      getTrendList(state.trendObj.code, state.trendObj.k)
    } else {
      [v]()
    }
  })
  state.errApiList = []
}
let goWenjuan = () => {}
onMounted(() => {
  let checkQueryResult = utils.checkRouterParams(route.query, true)
  if (checkQueryResult) {
    userId.value = route.query.userId as string;
    appKey.value = route.query.appKey as string;
    nextTick(() => {
      // 初始化echarts元素
      charDom.wuzhi = $echarts.init(document.getElementById('wuzhiChar'))
      let wuzhiOption = getRadarOption(0)
      charDom.wuzhi && charDom.wuzhi?.setOption(wuzhiOption)
      charDom.nengliang = $echarts.init(document.getElementById('nengliangChar'))
      let nengliangOption = getRadarOption(1)
      charDom.nengliang && charDom.nengliang?.setOption(nengliangOption)
      charDom.xinxi = $echarts.init(document.getElementById('xinxiChar'))
      let xinxiOption = getRadarOption(2)
      charDom.xinxi && charDom.xinxi?.setOption(xinxiOption)
      charDom.line = $echarts.init(document.getElementById('lineChart'))
      state.zhibiaoShow = false
    })
    getHomepage()
    getEmphasisQuotaList()
    questionnaireLists()
  }
})
onUnmounted(() => {
  $echarts.dispose(charDom.wuzhi)
  $echarts.dispose(charDom.nengliang)
  $echarts.dispose(charDom.line)
  $echarts.dispose(charDom.xinxi)
})
</script>

<style lang="scss" scoped>
$borderColor: rgba(255, 255, 255, 0.67);
.pinggu{
  text-align: left;
  .firstTitle{
    background: url("../../../assets/images/icon/heart.png") no-repeat;
    background-size: 21px 17px;
    background-position: left center;
    padding-left: 26px;
    margin-left: 12px;
    font-size: 16px;
    color: #222222;
    line-height: 22px;
  }
  .topBox{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px;
    overflow: scroll;
    .top-item{
      width: 232px;
      flex: none;
      height: 210px;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(145,149,161,0.1600);
      border-radius: 8px;
      border: 1px solid #E6ECFF;
      margin-right: 10px;
      position: relative;
      .item-title{
        position: absolute;
        top:30px;
        left: 5px;
        padding: 20px 10px 20px 10px;
        width: 28px;
        height: 101px;
        background: linear-gradient(180deg, rgba(239,245,249,0) 0%, #EFF5F9 49%, rgba(239,245,249,0) 100%);
        font-size: 12px;
        font-weight: 600;
        color: #414F5B;
        line-height: 17px;
      }
      .echart-box{
        width: 180px;
        height: 142px;
        margin-left: 40px;
      }
      .dis-text{
        width: 210px;
        padding: 5px;
        background: #ECF5FB;
        border-radius: 4px;
        color: #414F5B;
        line-height: 16px;
        margin: 0 auto;
      }
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .pinggu-content{
    padding: 10px;
    .zbTitle{
      background-image: url("../../../assets/images/icon/title_bg2.png");
      margin-left: 10px;
    }
    .mbTitle{
      background-image: url("../../../assets/images/icon/mb_title.png");
      margin-left: 10px;
      margin-top: 10px;
    }
    .tzTitle{
      background-image: url("../../../assets/images/icon/icon-tizhi@2x.png");
      margin-left: 10px;
    }
    .qzTitle{
      background-image: url("../../../assets/images/icon/icon-qingzhi@2x.png");
      margin-left: 10px;
    }
  }
  .tags{
    overflow: hidden;
    padding-left: 12px;
    padding-bottom: 10px;
    .tagli{
      float: left;
      height: 26px;
      background: #F3F6FF;
      border-radius: 13px;
      border: 1px solid #4B7AFF;
      padding: 0 10px;
      font-size: 14px;
      color: #4B7AFF;
      line-height: 26px;
      margin-right: 13px;
      margin-bottom: 12px;
      position: relative;
      &.activeTag{
        background: #4B7AFF;
        color: #fff;
        border-color:#4B7AFF ;
        &:after{
          content: '';
          position: absolute;
          bottom: -5px;
          right: 18px;
          display: block;
          background: url("../../../assets/images/icon/sanjiao.png") no-repeat;
          background-size: 10px 5px;
          width: 10px;
          height: 5px;
        }
      }
      &.dis{
        background: #E4EBFF;
        border-color:  #E4EBFF;
        color: rgba(34, 34, 34, 0.8);
      }
    }
  }
  .openBox{
    padding: 10px;
    .open-item{
      background: linear-gradient(155deg, #F3FEFF 0%, #DCECFF 100%) ,linear-gradient(202deg, rgba(181,223,254,0.8600) 0%, rgba(255,255,255,0) 100%);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      margin-bottom: 10px;
      padding: 12px 8px;
      z-index: 2;
      &:last-child{
        margin-bottom: 0;
      }
      &:after{
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 106px;
        height: 86px;
        background: url("../../../assets/images/report/bg.png") no-repeat;
        background-size: 100% 100%;
        z-index: -1;
      }
    }
    .open-title{
      font-size: 16px;
      font-weight: 600;
      color: #1C74EF;
      line-height: 22px;
      margin-bottom: 14px;
    }
    .open-ul{
      font-size: 13px;
      .open-li{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 12px;
        &:last-child{
          margin-bottom: 0;
        }
        .li-name{
          display: flex;
          flex-direction: row;
          align-items: center;
          line-height: 18px;
          flex: none;
          margin-right: 6px;
          &:before{
            content: '';
            display: inline-block;
            width: 2px;
            height: 8px;
            background: #4B7AFF;
            border-radius: 2px;
            margin-right: 5px;
          }
        }
        .li-content{
          color: #1C1C1E;
          line-height: 18px;
          font-weight: 500;
        }
      }
    }
  }
  .lineChart{
    height: 320px;
  }
  .pingguList{
    padding-left: 12px;
    .pg-li{
      width: 331px;
      background: #FFFFFF;
      box-shadow: 0px 2px 6px 0px rgba(145,149,161,0.1600);
      border-radius: 4px;
      border: 1px solid #E6ECFF;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 21px 20px;
      margin-bottom:12px;
      &:last-child{
        margin-bottom: 0;
      }
      .pg-li-icon{
        width: 50px;
        height: 50px;
        flex: none;
        margin-right: 10px;
      }
      .pg-li-center{
        font-size: 12px;
        font-weight: 400;
        color: rgba(34,34,34,0.8);
        line-height: 15px;
        flex:1;
        margin-right: 10px;
        .preLine{
          white-space: pre-line;
        }
        .pg-tip{
          font-size: 15px;
          font-weight: 600;
          color: #222222;
          line-height: 22px;
          margin-bottom: 4px;
        }
        .pg-tip1{
          color: rgba(54, 189, 93, 1);
        }
        .pg-tip2{
          color: #FF6700;
        }
        .pg-tip3{
          color:rgba(255, 48, 0, 1) ;
        }
      }
      .to-report{
        font-size: 13px;
        font-weight: 400;
        color: #000000;
        flex: none;
      }
      .to-pinggu{
        font-size: 13px;
        font-weight: 600;
        color: #4B7AFF;
        flex:none;
      }
      .redo{
        width: 71px;
        height: 26px;
        background: #E5ECFF;
        border-radius: 0px 0px 0px 12px;
        position: absolute;
        right: 0;
        top:0;
        text-align: center;
        font-size: 12px;
        color: #4B7AFF;
        line-height: 26px;
      }
    }
  }
  .replayBox{
    position: fixed;
    right: 15px;
    bottom: 100px;
    border-radius: 50%;
    z-index: 100;
    padding: 8px;
    background-color: #4B7AFF;
    box-shadow: 0px 2px 6px 0px rgba(145,149,161,0.1600);
    text-align: center;
    opacity: 0;
    .replay{
      color: #ffffff;
      font-size: 20px;
      font-weight: bolder;
    }
  }
  @keyframes fresh {
    from {
      opacity: 1;
      transform: rotate(0);
    }
    to {
      opacity: 0;
      transform: rotate(720deg);
    }
  }
  .hasFresh{
    opacity: 1;
  }
  .noFresh{
    animation: fresh 1s linear;
  }
}
</style>
<style lang="scss">
.chartTooltip{
  z-index: 100!important;
}
.van-icon-question-o{
  padding: 5px;
}
</style>
